import { Button, Card, Descriptions } from 'antd'
import { useTranslations } from 'next-intl'
import React from 'react'
import styles from './index.module.less'

const ProfilePage: React.FC = () => {
  const t = useTranslations()

  // Mock user data
  const user = {
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '13800138000',
    balance: 1000,
  }

  return (
    <div className={styles.container}>
      <h1>{t('profile.title')}</h1>
      <Card>
        <Descriptions title={t('profile.userInfo')} bordered>
          <Descriptions.Item label={t('profile.name')}>{user.name}</Descriptions.Item>
          <Descriptions.Item label={t('profile.email')}>{user.email}</Descriptions.Item>
          <Descriptions.Item label={t('profile.phone')}>{user.phone}</Descriptions.Item>
          <Descriptions.Item label={t('profile.balance')}>¥{user.balance}</Descriptions.Item>
        </Descriptions>

        <div className={styles.actions}>
          <Button type="primary">{t('profile.edit')}</Button>
          <Button>{t('profile.changePassword')}</Button>
        </div>
      </Card>
    </div>
  )
}

export default ProfilePage
